<!DOCTYPE html>
<html lang="en">
<head>
    <title>RedisFox</title>
  <!-- <link rel="stylesheet/less" type="text/css" href="js/libs/bootstrap/less/bootstrap.less"/> -->
    <link rel="stylesheet" type="text/css" href="/static/js/libs/bootstrap/bootstrap.css">
    <link type="favicon" rel="shortcut icon" href="/static/images/favicon.ico">

</head>
<body>  
  
  <!-- NavBar -->
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">          
            <a class="brand" href="/">
              <strong>RedisFox</strong>
            </a>
            <select id="server-list" class="nav pull-right span2 server-list">
              <option>redis server..</option>                   
            </select>
        </div>
    </div>
  </div>

  <!-- Container -->
  <div class="container-fluid"> 
    
    <!-- Info Widget -->
    <div class="row-fluid">
      <div id="info-widget-placeholder" class="span12"></div>
    </div>
    <hr>    

    <!-- memory-widget -->
    <div class="row-fluid" id="memory-widget-placeholder"></div>
    <hr>

    <!-- commands-widget -->
    <div class="row-fluid" id="commands-widget-placeholder"></div>    
    <hr>
    
    <!-- top commands-widget AND top keys-widget -->
    <div class="row-fluid">
      <div class="span12">
         <div class="row-fluid">
            <!-- top commands widget -->
            <div class="span6" id="top-commands-widget-placeholder"></div>
            <!-- top keys widget -->
            <div class="span6" id="top-keys-widget-placeholder"></div>
          </div>
      </div>
    </div>

  </div>
  <!-- End Container -->


  <!-- javascript ==================================================-->  
  <script type="text/javascript" src="/static/js/google/jsapi.js"></script>
  <script type="text/javascript" src="/static/js/google/visualization.js"></script>
  <link rel="stylesheet" type="text/css" href="/static/js/google/jsapi.css">
  <script type="text/javascript" src="/static/js/google/chart.js"></script>

  <script type="text/javascript" src="/static/js/libs/jquery/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/static/js/libs/less/less-1.3.0.min.js"></script>

  <script type="text/javascript" src="/static/js/libs/bootstrap/js/bootstrap-button.js"></script>
  <script type="text/javascript" src="/static/js/libs/bootstrap/js/bootstrap-tooltip.js"></script>
  <script type="text/javascript" src="/static/js/libs/bootstrap/js/bootstrap-popover.js"></script>
  <script type="text/javascript" src="/static/js/libs/bootstrap/js/bootstrap-dropdown.js"></script>

  <script type="text/javascript" src="/static/js/libs/underscore/underscore-min.js"></script>
  <script type="text/javascript" src="/static/js/libs/backbone/backbone-min.js"></script>
  <script type="text/javascript" src="/static/js/libs/handlebars/handlebars-1.0.0.beta.6.js"></script>
  
  <script type="text/javascript" src="/static/js/views/base-widget-view.js"></script>

  <script type="text/javascript" src="/static/js/models/serverlist-model.js"></script>
  <script type="text/javascript" src="/static/js/views/serverlist-view.js"></script>
  
  <script type="text/javascript" src="/static/js/models/info-widget-model.js"></script>
  <script type="text/javascript" src="/static/js/views/info-widget-view.js"></script>
  
  <script type="text/javascript" src="/static/js/models/memory-widget-model.js"></script>
  <script type="text/javascript" src="/static/js/views/memory-widget-view.js"></script>
  
  <script type="text/javascript" src="/static/js/models/commands-widget-model.js"></script>
  <script type="text/javascript" src="/static/js/views/commands-widget-view.js"></script>

  <script type="text/javascript" src="/static/js/models/top-commands-widget-model.js"></script>
  <script type="text/javascript" src="/static/js/views/top-commands-widget-view.js"></script>
  
  <script type="text/javascript" src="/static/js/models/top-keys-widget-model.js"></script>
  <script type="text/javascript" src="/static/js/views/top-keys-widget-view.js"></script>
  
  <script type="text/javascript" src="/static/js/app.js"></script>
  
  <script type="text/javascript">
    google.setOnLoadCallback( function() {
      $( function() {
        App.init()
      })
    })  
  </script>

  <!-- Info widget template
  ================================================== -->
  <script type="text/x-handlebars-template" id="info-widget-template">
    <div class="row-fluid">
      <div class="span12">    
        <table class="table">
          <tr>
            <td>
              <div class="info-box">
                <center>
                  <p>内存占用</p>
                  <p class="well-value">{{used_memory_human}}</p>
                </center>
              </div>
            </td>
            <td>
              <div class="info-box" id="total-keys">
                <center>         
                  <p>键总数</p>
                  <p class="well-value">{{total_keys}}</p>
                </center>       
              </div>
            </td>
            <td>
              <div class="info-box">
                <center>
                  <p>客户端连接数</p>
                  <p class="well-value">{{connected_clients}}</p>
                </center>
              </div>
            </td>
            <td>
              <div class="info-box">
                <center>
                  <p>处理命令数</p>
                  <p class="well-value">{{total_commands_processed_human}}</p>
                </center>
              </div>
            </td>
            <td>
              <div class="info-box">
                <center>
                  <p>运行时长</p>
                  <p class="well-value">{{uptime}}</p>
                </center>
              </div>
            </td>
     

            <!--<td>
              <div class="info-box" id="misc-info">
                <center>
                  <p>MISC</p>
                  <p class="well-value">...</p>
                </center>
              </div>
            </td>-->
          </tr>
        </table>  
      </div>  
    </div>   
  </script>
  
  <!-- keys tooltip template 
  ================================================== -->
  <script type="text/x-handlebars-template" id="popover-template">
    <ul>
    {{#each this}}
      <li>{{name}} : {{keys}} keys, {{expires}} expires</li>
    {{/each}}
     </ul>
  </script>

  <!-- info tooltip template 
  ================================================== -->
   <script type="text/x-handlebars-template" id="info-template">
     <ul>
      {{#hash this}}
        <li>{{key}} : {{value}}</li>
      {{/hash}}
     </ul>
   </script>

  <!-- Memory widget template 
  ================================================== -->
  <script type="text/x-handlebars-template" id="memory-widget-template">
    <div class="span12">
      <div class="row-fluid">              
        <div class="span4">
          <h3>内存趋势</h3>
        </div>
        <div class="" style="float:right">
          {{> date-dropdown}}
        </div>
      </div>
      <div id="memory-widget-chart"></div>         
    </div>
  </script>

  <!-- Commands widget template 
  ================================================== -->
  <script type="text/x-handlebars-template" id="commands-widget-template">
    <div class="span12">
      <div class="row-fluid">              
        <div class="span4">
          <h3>命令处理趋势</h3>
        </div>
        <div class="" style="float:right">
          {{> date-dropdown}}                                       
        </div>
      </div>
      <div id="commands-widget-chart"></div>         
    </div>
  </script>

  <!-- Top Commands widget template 
  ================================================== -->
  <script type="text/x-handlebars-template" id="top-commands-widget-template">
    <div class="row-fluid">              
      <div class="span6">
        <h3>命令排行趋势</h3>
      </div>      
      <div class="" style="float:right">
        {{> date-dropdown}}                                
      </div>      
    </div>
    <div id="top-commands-widget-chart"></div>    
  </script>

  <!-- Top Keys widget template 
  ================================================== -->
  <script type="text/x-handlebars-template" id="top-keys-widget-template">
    <div class="row-fluid">              
      <div class="span6">
        <h3>键数排行趋势</h3>
      </div>      
      <div class="" style="float:right">
        {{> date-dropdown}}                                
      </div>      
    </div>
    <div id="top-keys-widget-chart"></div>    
  </script> 

  <!-- Date Drop down template
  ================================================== -->
  <script type="text/x-handlebars-template" id="date-dropdown-template">
    <form class="form-inline" onsubmit="return false;">
      <div class="btn-toolbar" style="">
        <div class="btn-group">
          <button class="btn btn-small">日期选择</button>
          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#" class="time-period" data-type="realtime" data-time="0">快捷选择</a></li>
            <li class="divider"></li>
            <li><a href="#" class="time-period" data-type="minute" data-time="15">最近15分钟</a></li>
            <li><a href="#" class="time-period" data-type="minute" data-time="30">最近30分钟</a></li>
            <li><a href="#" class="time-period" data-type="minute" data-time="45">最近45分钟</a></li>
            <li class="divider"></li>
            <li><a href="#" class="time-period" data-type="hour" data-time="1">最近1小时</a></li>
            <li><a href="#" class="time-period" data-type="hour" data-time="3">最近3小时</a></li>
            <li><a href="#" class="time-period" data-type="hour" data-time="12">最近12小时</a></li>
            <li class="divider"></li>
            <li><a href="#" class="time-period" data-type="day" data-time="1">最近1天</a></li>
            <li><a href="#" class="time-period" data-type="day" data-time="2">最近2天</a></li>
            <!--<li><a href="#" class="time-period" data-type="day" data-time="3">last 3 days</a></li>
            <li><a href="#" class="time-period" data-type="day" data-time="4">last 4 days</a></li>
            <li><a href="#" class="time-period" data-type="day" data-time="5">last 5 days</a></li>
            <li><a href="#" class="time-period" data-type="day" data-time="6">last 6 days</a></li>-->
            <li class="divider"></li>
            <li><a href="#" class="time-period" data-type="week" data-time="1">最近1周</a></li>
            <!--<a href="#" class="time-period" data-type="week" data-time="2">last 2 weeks</a></li>-->
            <li class="divider"></li>
            <li><a href="#" class="time-period" data-type="month" data-time="1">最近1个月</a></li>
            <li class="divider"></li>
            <li><a href="#" class="time-period" data-type="custom" data-time="0">自定义</a></li>
          </ul>
        </div>
        <div class="date-control hide">
          <input type="text" class="input-small" placeholder="开始日期" name="from">
          <input type="text" class="input-small" placeholder="结束日期" name="to">
          <button type="button" class="btn go" >确定</button>
        </div>                   
      </div>
    </form> 
  </script>

</body>
</html>
